<template>
  <el-page-header @back="this.$router.push('/dev')">
    <template #content>
      <span class="text-large font-600 mr-3"> 添加设备 </span>
    </template>
  </el-page-header>
  <el-row>
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="12"
      ><div class="grid-content ep-bg-purple-light" />
      <div style="margin: 20px" />

      <el-form
        label-width="100px"
        style="max-width: 460px"
        ref="loginForm"
        :rules="rules"
        :model="obj"
      >
        <h1 class="title">添加设备</h1>
        <el-form-item label="deviceName" prop="deviceName">
          <el-input v-model="obj.deviceName" />
        </el-form-item>
        <el-form-item label="deviceNick" prop="deviceNick">
          <el-input v-model="obj.deviceNick" />
        </el-form-item>
        <div id="button">
          <el-button type="primary" @click="addDev('loginForm')"
            >提交</el-button
          >
        </div>
      </el-form>
    </el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
</template>

<script>
import axios from "axios";
import Qs from "qs";
import { ref, getCurrentInstance } from "vue-demi";
import { ElMessage } from "element-plus";
import router from "@/router/index.js";
export default {
  name: "addDev",
  setup() {
    const { ctx } = getCurrentInstance();
    const obj = ref({
      deviceName: "",
      deviceNick: "",
    });

    const rules = ref({
      deviceName: [
        {
          required: true,
          message: "deviceName不能为空",
          trigger: "blur",
        },
        {
          min: 4,
          max: 32,
          message: "deviceName长度为4~32个字符",
          trigger: "blur",
        },
      ],
      deviceNick: [
        {
          required: true,
          message: "deviceNick不能为空",
          trigger: "blur",
        },
        {
          min: 4,
          max: 64,
          message: "deviceName长度为4~64个字符",
          trigger: "blur",
        },
      ],
    });

    let addDev = (formName) => {
      ctx.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("aaa");
          //vue中通过axios给服务器传消息
          axios({
            method: "post",
            url: "https://3098l4z890.picp.vip/adddevice",
            data: Qs.stringify({
              //需要通过Qs的stringify转成formdata的形式
              deviceName: obj.value.deviceName,
              nickName: obj.value.deviceNick,
            }),
            responseType: "json",
          })
            .then(function (info) {
              if (info.data.success) {
                //跳转功能实现
                ElMessage({
                  showClose: true,
                  message: "添加成功",
                  type: "success",
                });
                router.push("/message");
                console.log("submit!");
              } else {
                console.log("error submit!");
                ElMessage({
                  showClose: true,
                  message: "添加失败",
                  type: "error",
                });
                return false;
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      });
    };
    return {
      obj,
      rules,
      addDev,
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style>
.el-form {
  height: 80%;
  margin-top: 100px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0px 5px 10px #cccc;
  opacity: 0.9;
}

.el-input {
  width: 80%;
}

.el-form-item {
  margin-left: 40px;
}
</style>
